<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>动画漫游</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        'use strict';

        //定义三维视图的主要类
        var webGlobe;
        //定义动画漫游对象、路径；
        var animation, positions;

        //地图初始化函数
        function init() {
            //构造三维视图类（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {
                terrainExaggeration: 1,
            });

            //构造第三方图层对象
            var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                viewer: webGlobe.viewer
            });
            //加载天地图
            var tdtLayer = thirdPartyLayer.appendTDTuMap({
                //天地图经纬度数据
                url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}',
                //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效）
                token: "9c157e9585486c02edf817d2ecbc7752",
                //地图类型 'vec'矢量 'img'影像 'ter'地形
                ptype: "img"
            });

            //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
            webGlobe.flyToEx(117.213063, 31.812956, {
                height: 200,
                heading: 90,
                pitch: 0,
                roll: 0
            });

            //显示鼠标位置控件
            webGlobe.showPosition('coordinate_location');
            //显示导航控件（罗盘、比例尺、场景导航）
            webGlobe.createNavigationTool({
                enableCompass: true,
                enableZoomControls: true,
                enableDistanceLegend: true
            });

            var viewer = webGlobe.viewer;
            var scene = webGlobe.scene;
            //避免穿透地形
            var controller = scene.screenSpaceCameraController;
            controller.minimumZoomDistance = 3000;
            scene.camera.enableTerrainAdjustmentWhenLoading = true; //避免穿透地形

            //漫游路径
            positions = Cesium.Cartesian3.fromDegreesArrayHeights([
                117.213063, 31.812956, 500, 117.213162, 31.812389, 500, 117.212929, 31.812056, 500, 117.213275, 31.811582, 500,
                117.21348, 31.811513, 500, 117.214141, 31.811682, 500, 117.21497, 31.811691, 500, 117.216318, 31.811454, 500,
                117.216962, 31.812037, 500, 117.217893, 31.812298, 500, 117.218607, 31.811488, 500, 117.219466, 31.810935, 500,
                117.224439, 31.810929, 500, 117.225266, 31.811119, 500, 117.225308, 31.81131, 500, 117.224819, 31.811724, 500,
                117.225189, 31.811928, 500, 117.225676, 31.811624, 500, 117.225843, 31.811943, 500, 117.22625, 31.812183, 500,
                117.226292, 31.81281, 500, 117.225888, 31.813287, 500, 117.226093, 31.814059, 500, 117.22564, 31.814582, 500,
                117.225953, 31.814731, 500, 117.225611, 31.814954, 500, 117.22576, 31.815233, 500, 117.224073, 31.816329, 500,
                117.223694, 31.81627, 500, 117.222769, 31.817007, 500, 117.222259, 31.816871, 500, 117.221922, 31.816707, 500,
                117.221653, 31.816788, 500, 117.22151, 31.817002, 500, 117.221039, 31.816891, 500, 117.220395, 31.816352, 500,
                117.220166, 31.815734, 500, 117.219804, 31.815607, 500, 117.219461, 31.815122, 500, 117.21878, 31.814846, 500,
                117.218297, 31.815275, 500, 117.217975, 31.815172, 500, 117.217142, 31.815229, 500, 117.216753, 31.815124, 500,
                117.216652, 31.814308, 500, 117.215726, 31.814049, 500, 117.214769, 31.813517, 500, 117.214111, 31.813717, 500,
                117.213552, 31.814099, 500, 117.213024, 31.813954, 500, 117.212897, 31.813892, 500, 117.213224, 31.813681, 500,
                117.212788, 31.813147, 500, 117.212928, 31.813018, 500, 117.213063, 31.812956, 500,
            ]);

            //初始化高级分析功能管理类
            var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({
                viewer: webGlobe.viewer
            });
            //创建动画漫游对象
            animation = advancedAnalysisManager.createAnimation({
                exHeight: 9,
                isLoop: false,
                //漫游模型url
                modelUrl: './static/data/model/WuRenJi.glb',
                //完成动画漫游回调函数
                complete: function() {
                    alert('完毕');
                }
            });

            //设置路径
            animation.positions = positions;
            //漫游方式：1-跟随、2-锁定第一视角、3-上帝视角
            animation.animationType = 2;
            //漫游速度
            animation.speed = 1;

            //设置动画漫游参数
            var viewModel = {
                pitch: 0, //俯仰角
                heading: 90, //方位角
                range: 0, //距离
                speed: 1 //速度
            };
            Cesium.knockout.track(viewModel);
            //与界面UI绑定
            var toolbar = document.getElementById('toolbar');
            Cesium.knockout.applyBindings(viewModel, toolbar);

            function subscribeParameter(name) {
                Cesium.knockout.getObservable(viewModel, name).subscribe(
                    function(newValue) {
                        if (name === 'pitch') {
                            //animation.offsetZ = newValue;
                            //animation.pitch = Cesium.Math.toRadians(parseInt(newValue));
                            animation.pitch = Cesium.Math.toRadians(parseInt(newValue)); //俯仰角
                        } else if (name === 'range') {
                            animation.range = parseFloat(newValue); //距离

                        } else if (name === 'heading') {
                            animation.heading = Cesium.Math.toRadians(parseInt(newValue)); //方位角
                        } else if (name === 'speed') {
                            animation.speedupFactor = parseFloat(newValue); //速度
                        }
                    }
                );
            }
            subscribeParameter('pitch');
            subscribeParameter('heading');
            subscribeParameter('range');
            subscribeParameter('speed');

            /*
                function callBack(arg) {
                    //绘制路径点
                    positions = arg._points;
                    //设置漫游路径
                    animation.positions = positions;
                    //显示路径
                    animation.animationModel.path.show._value = !animation.animationModel.path.show._value;
                    //开始漫游
                    animation.start();
                    //漫游速度
                    animation.speed = 1;
                    //漫游方式：1-跟随、2-锁定第一视角、3-上帝视角
                    animation.animationType = 2;
    
                }
                //创建交互绘制工具
                var drawPolygon = new Cesium.DrawPolygonTool(webGlobe.viewer, callBack);
                drawPolygon.activeTool();
            */
        }

        function start() {
            //开始漫游
            animation.start();
            //显示路径
            animation._animationModel._path._show._value = true;
        }

        function pause() {
            //暂停漫游
            animation.pause = true;
        }

        function stop() {
            //停止漫游
            animation.stop();
        }

        function changeType() {
            var aType = document.getElementsByName("animationType")
            for (var i = 0; i < aType.length; i++) {
                if (aType[i].checked) {
                    if (Number(aType[i].value) == 2) {
                        document.getElementById("pitch").style.display = "";
                        document.getElementById("heading").style.display = "";
                    } else {
                        document.getElementById("pitch").style.display = 'none';
                        document.getElementById("heading").style.display = 'none';
                    }
                    //设置漫游方式：1-跟随、2-锁定第一视角、3-上帝视角
                    animation.animationType = Number(aType[i].value);
                }
            }
        }
    </script>
</head>

<body onload="init()">
    <div id="GlobeView">
        <div class="message">
            <button id="start" onclick="start()">开始漫游</button>
            <button id="pause" onclick="pause()">暂停漫游</button>
            <button id="stop" onclick="stop()">结束漫游</button>
        </div>
    </div>
    <!--坐标容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
        <label id="coordinate_height"></label>
    </div>

    <div class="message" id="toolbar" style="left: unset; top: 40px; ">
        <table>
            <tbody>
                <tr>
                    <td>漫游方式</td>
                    <td>
                        <label><input style="float:unset; width:unset;" name="animationType" type="radio" value="1"
                                onclick="changeType()" />跟随</label>
                        <label><input style="float:unset; width:unset;" name="animationType" type="radio" checked
                                value="2" onclick="changeType()" />锁定第一视角</label>
                        <label><input style="float:unset; width:unset;" name="animationType" type="radio" value="3"
                                onclick="changeType()" />上帝视角</label>

                    </td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr id="pitch" style="display:''">
                    <td>俯仰角</td>
                    <td>
                        <input type="range" min="-180" max="180" value="0" step="1" data-bind="value: pitch, valueUpdate: 'input'" size="20">
                        <input type="number" size="2" data-bind="value: pitch">
                    </td>
                </tr>
                <tr id="heading" style="display:''">
                    <td>方位角</td>
                    <td>
                        <input type="range" min="-180" max="180" value="90" step="1" data-bind="value: heading, valueUpdate: 'input'">
                        <input type="number" size="2" data-bind="value: heading">
                    </td>
                </tr>
                <tr>
                    <td>距离</td>
                    <td>
                        <input type="range" min="0.1" max="200" step="1" data-bind="value: range, valueUpdate: 'input'">
                        <input type="number" size="2" data-bind="value: range">
                    </td>
                </tr>
                <tr>
                    <td>播放速度</td>
                    <td>
                        <input type="range" min="1" max="10" step="1" data-bind="value: speed, valueUpdate: 'input'">
                        <input type="number" size="2" data-bind="value: speed">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>